<script lang="ts" setup>
import { ref, reactive, nextTick } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

const scrollOutRef = ref();

import headerUtil from "./base/common/headerUtil.vue";
import cardUtil from "./base/personal/cardUtil.vue";
import orderNavUtil from "./base/personal/orderNavUtil.vue";
import powerNavUtil from "./base/personal/powerNavUtil.vue";
import cartLineUtil from "./base/cart/cartLineUtil.vue";
import productItemUtil from "./base/personal/productItemUtil.vue";
import commonNavUtil from "./base/common/commonNavUtil.vue";
import reqApis from '../req/reqApis.js';

const currentData = ref<any>({
  user: {},
  headerObj:{
    showType: 2
  },
  list: [],
  pageIndex: 1,
  isStop: false
});

const getUserFn = () => {
  reqApis.getCurrentUserApi({}).then(res => {
    currentData.value.user = res.data;
  })
};
const getProductListFn = () => {
  if(!currentData.value.isStop){
    let params = {
      page: currentData.value.pageIndex,
      size: 10
    };
    reqApis.getProductListApi(params).then(res => {
      if(res.data.length>0){
        currentData.value.list.push(...res.data);
      }else{
        currentData.value.isStop = true;
      }
    })
  }
};
const scrollData = () => {
  let outH = scrollOutRef.value.scrollHeight,
      currentH = scrollOutRef.value.offsetHeight,
      offH = scrollOutRef.value.scrollTop;
    if(currentH + offH >= (outH-1)){
      currentData.value.pageIndex += 1;
      getProductListFn();
    }
};

const toDemo = () => {
  router.push("demo")
}

getUserFn();
getProductListFn();
</script>
<template>
  <section class="personal">
    <headerUtil :obj="currentData.headerObj">我的中心</headerUtil>
    <div class="content" @scroll.passive="scrollData" ref="scrollOutRef">
      <cardUtil :userInfo="currentData.user"></cardUtil>
      <orderNavUtil></orderNavUtil>
      <div @click="toDemo" class="demoWrap">demo</div>
      <!-- <powerNavUtil></powerNavUtil> -->
      <cartLineUtil>为您推荐</cartLineUtil>
      <div class="list">
        <productItemUtil :obj="item" v-for="(item, index) in currentData.list" :key="index"></productItemUtil>
      </div>
    </div>
    <commonNavUtil :iNow="5"></commonNavUtil>
  </section>
</template>

<style lang="less" scoped>
.personal {
  width: 3.75rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  .content {
    flex: 1;
    overflow-y: auto;
    .demoWrap {
      margin: .1rem 0;
      padding: .1rem;
      background: white;
      text-align: center;
    }
    .list {
      background: white;
      overflow: hidden;
    }
  }
}
</style>

